import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router,Route,Link,
  useParams,
  useLocation,
  useHistory,
  useRouteMatch
} from './react-router-dom';
function Home(){
  return <div>首页</div>;
}
function UserDetail(){
  const params = useParams();
  console.log('params',params);
  const location = useLocation();
  console.log('location',location);
  const history = useHistory();
  console.log('history',history);
  return <div>User id:{params.id} <br/>name:{location.state.name}</div>;
}

function Post(props){
  //↑ props.match 和 我们这里返回的match不是同一个
  //  正确来说每次 matchPath 返回的都是一个新的

  const match = useRouteMatch({
    path:'/post/:id',
    strict:true,
    sensitive:true
  });
  console.log('match',match);
  return match?<div>id:{match.params.id}</div>:<div>Not Found</div>
}
ReactDOM.render(
  <Router>
    <div>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link  to={{pathname:'/user/detail/1',state:{id:1,name:'珠峰架构'}}}>用户1详情</Link></li>
        <li><Link to="/post/1">贴子</Link></li>
      </ul>
      <Route path="/" component={Home}/>
      <Route path="/user/detail/:id" component={UserDetail}/>
      <Route path="/post/:id" component={Post}/>
    </div>
  </Router>,
  document.getElementById('root')
);
